---
title: Estilize o Markdown renderizado com Tailwind Typography
description: Aprenda como usar o @tailwind/typography para estilizar seu Markdown renderizado.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Você pode usar o plugin de tipografia do [Tailwind](https://tailwindcss.com) para estilizar o Markdown renderizado de fontes como as [**coleções de conteúdo**](/pt-br/guides/content-collections/) do Astro.

Este guia irá te ensinar a criar um componente Astro reutilizável para estilizar seu conteúdo Markdown usando as classes utilitárias do Tailwind.

## Pré-requisitos

Um projeto Astro que:
    - tenha a [integração do Tailwind do Astro](/pt-br/guides/integrations-guide/tailwind/) instalada.
    - use as [coleções de conteúdo](/pt-br/guides/content-collections/) do Astro.

## Configurando `@tailwindcss/typography`

Para começar, instale o `@tailwindcss/typography` usando o seu gerenciador de pacotes preferido.

<PackageManagerTabs>
 	<Fragment slot="npm">
	```shell 
	npm install -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="pnpm">
	```shell 
	pnpm add -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="yarn">
	```shell
	yarn add --dev @tailwindcss/typography
	```
	</Fragment>
</PackageManagerTabs>

Em seguida, adicione o pacote como um plugin no seu arquivo de configuração do Tailwind.

```diff lang="js"
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
+   require('@tailwindcss/typography'),
    // ...
  ],
}
```

## Guia

1. Crie um componente `<Prose />` para fornecer uma `<div>` com um `<slot />` que envolva seu Markdown renderizado. Adicione a classe de estilo `prose` juntamente com quaisquer [modificadores de elementos do Tailwind](https://tailwindcss.com/docs/typography-plugin#element-modifiers) desejados no elemento pai.

    ```astro title="src/components/Prose.astro"
    ---
    ---
    <div 
      class="prose dark:prose-invert 
      prose-h1:font-bold prose-h1:text-xl 
      prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl 
      prose-headings:underline">
      <slot />
    </div>
    ```
    :::tip
    O plugin `@tailwindcss/typography` usa [**modificadores de elementos**](https://tailwindcss.com/docs/typography-plugin#element-modifiers) para estilizar componentes filhos de um contêiner com a classe `prose`.

    Esses modificadores seguem a seguinte sintaxe geral:

      ```
      prose-[element]:classe-a-ser-aplicada
      ``` 

    Por exemplo, `prose-h1:font-bold` dá a todas as tags `<h1>` a classe Tailwind `font-bold`.
    :::

2. Consulte sua entrada de coleção na página em que deseja renderizar seu Markdown. Passe o componente `<Content />` de `await entry.render()` para `<Prose />` como um componente filho para envolver seu conteúdo Markdown em estilos do Tailwind.

    ```astro title="src/pages/index.astro"
    ---
    import Prose from '../components/Prose.astro';
    import Layout from '../layouts/Layout.astro';
    import { getEntry } from 'astro:content';

    const entry = await getEntry('collection', 'entry');
    const { Content } = await entry.render();
    ---
    <Layout>
      <Prose>
        <Content />
      </Prose>
    </Layout>
    ```

## Recursos

- [Documentação do Tailwind Typography](https://tailwindcss.com/docs/typography-plugin)
